﻿<extend name="Public:office" />
<block name="title"><title>任务管理</title></block>
<block name="header_styles">
    <style type="text/css">
        .img-priority {
            margin-right: 10px;
        }

        .waiting {
            background-image: url(/Public/themes/images/waitBtn.gif);
            background-position: center center;
            background-repeat: no-repeat;
            color: transparent !important;
        }

        input.error,
        textarea.error {
            border: 1px solid #f00 !important;
        }

        .edit-task, .remove-task {
            float: right;
            display: inline-block;
            padding: 10px 10px;
            font-size: 15px;
        }

        .k-datepicker {
            margin-top: 0px;
        }
    </style>
</block>
<block name="main">
    <div class="task-container">
        <ul class="task-menu">
            <li class="active"><a href="javascript:void(0);">任务管理</a></li>
            <li> |</li>
            <li><a href="{:U('/Task/statistics')}">任务统计</a></li>
        </ul>
        <div class="task-body">
            <div class="task-left">
                <ul class="nav nav-task">
                    <li class="active"><a href="#myPublish" data-toggle="tab">我的发布</a></li>
                    <li>|</li>
                    <li><a href="#myTasks" data-toggle="tab">我的任务</a></li>
                    <li>|</li>
                    <li><a href="#followMe" data-toggle="tab">@我</a></li>
                </ul>
                <div class="tab-content task-list">
                    <div class="tab-pane active" id="myPublish">
                        <div class="publish-container"> </div>
                        <div class="text-center task-buttons">
                            <a href="javascript:void(0);" class="publish-button" id="btnAddNewTask"><i class="fa fa-plus"></i> 任务发布</a>
                        </div>
                    </div>
                    <div class="tab-pane" id="myTasks"></div>
                    <div class="tab-pane" id="followMe"></div>
                </div>
            </div>
            <div class="task-main" id="taskMain">

            </div>
        </div>
    </div>

</block>
<block name="footer_scripts">

    <script type="text/x-kendo-template" id="tplAddNewTask">
        <div class="task-details">
            <form method="post" id="formAddNewTask" class="form-horizontal">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">执 行 者:</label>
                            <div class="col-xs-10">
                                <select class="form-control" style="max-width:200px;" name="executor" id="executor">
                                    <volist name="members" id="vo">
                                        <option value="{$vo.userid}">{$vo.nickname}</option>
                                    </volist>
                                </select>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">抄&nbsp;&nbsp;&nbsp;送:</label>
                            <div class="col-xs-10">
                                <select id="selCC" name="cc" multiple>
                                    <volist name="members" id="vo">
                                        <option value="{$vo.userid}">{$vo.nickname}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">截&nbsp;止&nbsp;日&nbsp;期:</label>
                            <div class="col-xs-10">
                                <input type="text" class="task-input date required" id="txtExpires" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-9 col-xs-offset-2 checkbox">
                                <label>
                                    <input type="checkbox" id="priority" />&nbsp;加急
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">任&nbsp;务&nbsp;标&nbsp;题:</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control required" name="title" id="title" maxlength="200" />

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">任&nbsp;务&nbsp;描&nbsp;述:</label>
                            <div class="col-xs-10">
                                <textarea type="text" class="form-control required" id="taskcontent" name="taskcontent" maxlength="2000" rows="10"></textarea>

                            </div>
                        </div>

                        <div class="form-buttons text-center">
                            <button type="button" id="btnCancel" class="btn btn-green" data-new="true">取消</button>
                            &nbsp;
                            <button type="submit" id="btnSubmit" data-loading-text="发布" class="btn btn-green">发布</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </script>
    <script type="text/x-kendo-template" id="tplEditTask">
        <div class="task-details">
            <form method="post" id="formEditTask" class="form-horizontal" data-taskid="#:id#">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-xs-2 control-label">执 行 者:</label>
                            <div class="col-xs-10">
                                <select class="form-control" style="max-width:200px;" name="executor" id="executor">
                                    <volist name="members" id="vo">
                                        <option value="{$vo.userid}">{$vo.nickname}</option>
                                    </volist>
                                </select>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">抄&nbsp;&nbsp;&nbsp;送:</label>
                            <div class="col-xs-10">
                                <select id="selCC" name="cc" multiple>
                                    <volist name="members" id="vo">
                                        <option value="{$vo.userid}">{$vo.nickname}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">截&nbsp;止&nbsp;日&nbsp;期:</label>
                            <div class="col-xs-10">
                                <input type="text" class="task-input date required" id="txtExpires" value="#:kendo.toString(deadline,'yyyy-MM-dd')#" />

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-9 col-xs-offset-2 checkbox">
                                <label>
                                    #if(priority==1){#
                                    <input type="checkbox" id="priority" checked />&nbsp;加急
                                    #}else{#
                                    <input type="checkbox" id="priority" />&nbsp;加急
                                    #}#
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-2 control-label">任&nbsp;务&nbsp;标&nbsp;题:</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control required" name="title" id="title" maxlength="200" value="#:title#" />

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-2 control-label">任&nbsp;务&nbsp;描&nbsp;述:</label>
                            <div class="col-xs-10">
                                <textarea type="text" class="form-control required" id="taskcontent" name="taskcontent" maxlength="2000" rows="10">#:content#</textarea>
                            </div>
                        </div>

                        <div class="form-buttons text-center">
                            <button type="button" id="btnCancel" class="btn btn-green">取消</button>
                            &nbsp;
                            <button type="submit" id="btnSubmit" data-loading-text="保存" class="btn btn-green">保存</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </script>
    <script type="text/x-kendo-template" id="tplTaskItem1">
        <div class="task-item">
            <select class="task-item-status" data-status="#:process#" data-id="#:id#">
                #for(var i = 0;i < statag.length; i++){#
                <option value="#:statag[i]#">#:taskStatus[statag[i]-1]#</option>
                #}#
            </select>
            <!--<span class="task-status">未开始</span>-->
            #if(level==1){#
            <img src="__PUBLIC__/themes/images/icon_topprority.png" data-taskid="#:id#" class="img-priority" data-cancel="false" />
            #}#
            <h3><a href="javascript:void(0);" data-id="#:id#">#:title#</a></h3>

            <div class="task-info">
                <div class="pull-left text-nowrap"><strong>执行者：</strong>#:exetor#</div>
                <div class="pull-right text-nowrap"><strong>截止期：</strong>#:kendo.toString(new Date(deadline),"yyyy-MM-dd")#</div>
                <div class="clearfix"></div>
            </div>
        </div>
    </script>
    <script type="text/x-kendo-template" id="tplTaskItem2">
        <div class="task-item">
            <select class="task-item-status" data-status="#:process#" data-id="#:id#">
                #for(var i = 0; i < statag.length; i++){#
                <option value="#:statag[i]#">#:taskStatus[statag[i]-1]#</option>
                #}#
            </select>
            #if(level==1){#
            <img src="__PUBLIC__/themes/images/icon_topprority.png" class="img-priority" data-cancel="false" />
            #}#

            <h3><a href="javascript:void(0);" data-id="#:id#">#:title#</a></h3>

            <div class="task-info">
                <div class="pull-left text-nowrap"><strong>发布者：</strong>#:sender#</div>
                <div class="pull-right text-nowrap"><strong>截止期：</strong>#:kendo.toString(new Date(deadline),"yyyy-MM-dd")#</div>
                <div class="clearfix"></div>
            </div>
        </div>
    </script>
    <script type="text/x-kendo-template" id="tplTaskItem3">
        <div class="task-item active">
            <span class="task-status">#:taskStatus[status-1]#</span>
            #if(level==1){#
            <img src="__PUBLIC__/themes/images/icon_topprority.png" class="img-priority" data-cancel="false" />
            #}#
            <h3><a href="javascript:void(0);" data-id="#:id#">#:title#</a></h3>

            <div class="task-info">
                <div class="text-nowrap">
                    <strong>发布者：</strong><span class="limit-text" style="width:40px;" title="小孩小孩">#:sender#</span>
                    <strong>执行者：</strong><span class="limit-text" style="width:40px;" title="作家">#:exetor#</span>
                    <strong>截止期：</strong>#:kendo.toString(new Date(deadline),"yyyy-MM-dd")#
                </div>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-template" id="tplDetails">
        <div class="task-details">
            <div class="task-details-heading">
                #if(priority==1){#
                <img src="__PUBLIC__/themes/images/icon_toppriority2.png" />
                #}#
                发布者:<span class="name-span" title="#:fromName#">#:fromName#</span>
                &nbsp;
                抄送:<span class="name-span" title="#:ccName#">#:ccName#</span>
                &nbsp;
                执行者:<span class="name-span" title="#:toName#">#:toName#</span>
                &nbsp;
                截止期:<span>#:kendo.toString(new Date(deadline),"yyyy-MM-dd")#</span>
            </div>
            #if(from=={$uid}){#
            <a href="javascript:void(0);" class="remove-task" data-taskid="#:id#" title="删除"><i class="fa fa-remove"></i></a>
            <a href="javascript:void(0);" class="edit-task" data-taskid="#:id#" title="编辑"><i class="fa fa-edit"></i></a>
            #}#
            <div class="task-details-title">
                #:title#
            </div>
            <div class="task-details-content">
                #:content#
            </div>
            <div class="task-comments">
                <div class="task-comments-heading">任务交流</div>
                <div class="task-comments-content" id="comments">
                    <div></div>
                </div>
                <form action="" method="post" class="post-comments" data-id="#:id#">
                    <textarea id="txtComments" maxlength="100"></textarea>
                    <button class="comment-button" type="submit" data-loading-text="发送">发送</button>
                </form>
            </div>
        </div>
        <div class="task-edit-container"></div>
    </script>

    <script type="text/x-kendo-template" id="tplCommentLine">
        <div class="task-comments-line">
            <div class="line-heading">
                #:authorname#（#:kendo.toString(ctime,"yyyy-MM-dd hh:mm")#）:&nbsp;
                #if(author=={$uid}){#
                <a href="javascript:void(0);" data-id="#:id#" class="remove-button">删除</a>
                #}#
            </div>
            <div class="line-content">
                #:content#
            </div>
        </div>
    </script>
    <script type="text/javascript">
        var taskStatus = Array("未开始", "进行中", "待验收", "已验收");


        function request(name) {
            var pattern = /(\\w*)=([a-zA-Z0-9\\u4e00-\\u9fa5]+)/ig, params = {};//定义正则表达式和一个空对象
            decodeURIComponent(window.location.href, true).replace(pattern, function (a, b, c) {
                params[b] = c;
            });
            return params[name] ? params[name] : null;
        }


        require(["jquery",
            "modules/message",
            "kendoui/kendo.web.min",
            "kendoui/kendo.datepicker.min",
            "culture",
            "jquery.unobtrusive"],
            function ($, messageBox) {
                kendo.culture("zh-CN");

                function loadTask(container, type, tplid, afterLoad) {
                    $.ajax({
                        url: "/Bridge-Taskapi-getTaskList",
                        type: "get",
                        dataType: "json",
                        data: { type: type },
                        success: function (data) {
                            console.log(data);
                            if (data && data.data) {
                                var tpl = kendo.template($(tplid).html());
                                var html = kendo.render(tpl, data.data);
                                container.html(html);
                                if (afterLoad != undefined) {
                                    afterLoad();
                                }
                            }
                        }
                    });
                }

                function loadCommtents(id) {
                    $.ajax({
                        url: "/Bridge-Taskapi-getTaskComments",
                        type: "get",
                        dataType: "json",
                        data: { task: id },
                        success: function (data) {
                            if (data && $.isArray(data.data)) {
                                var tpl = kendo.template($("#tplCommentLine").html());
                                var html = kendo.render(tpl, data.data);
                                $("#comments div").html(html);
                                $("#comments").scrollTop($("#comments > div").height());
                            }
                        }
                    });
                }

                function loadAllTasks() {
                    loadTask($("#myPublish .publish-container"), 1, "#tplTaskItem1", function () {
                        $("#myPublish .publish-container select.task-item-status").each(function () {
                            var status = $(this).data("status");
                            $(this).get(0).value = status;
                        });
                    });
                    loadTask($("#myTasks"), 2, "#tplTaskItem2", function () {
                        $("#myTasks select.task-item-status").each(function () {
                            var status = $(this).data("status");
                            $(this).get(0).value = status;
                        });
                    });
                    loadTask($("#followMe"), 3, "#tplTaskItem3", function () {
                        $("#followMe select.task-item-status").each(function () {
                            var status = $(this).data("status");
                            $(this).get(0).value = status;
                        });
                    });
                }

                function changeLevel(taskid) {
                    $.ajax({
                        url: "/Bridge-Taskapi-toggleLevel",
                        type: "post",
                        dataType: "json",
                        data: { id: taskid },
                        success: function (data) {
                            if (data.success == 0) {
                                messageBox.alert({ title: "失败", content: data.msg });
                                return;
                            }
                            loadAllTasks();
                        }
                    });
                }

                function changeStatus(sender) {
                    var status = $(sender).val();
                    var taskid = $(sender).data("id");
                    $(sender).addClass("waiting").attr("disabled", true);
                    $.ajax({
                        url: "/Bridge-Taskapi-changeStatus",
                        type: "post",
                        dataType: "json",
                        data: { id: taskid, status: status },
                        success: function (data) {
                            $(sender).removeAttr("disabled").removeClass("waiting");
                            if (data.success == 0) {
                                messageBox.alert({ title: "失败", content: data.msg });
                                $(sender).get(0).value = $(sender).data("status");
                                return;
                            }
                            loadAllTasks();
                        }
                    });
                }

                $(function () {
                    var targetId = window.location.hash;
                    if (targetId) {
                        var taskId = parseInt(targetId.replace("#", ""));
                        if (isNaN(taskId)) {
                            $(".nav-task li").each(function () {
                                var hasTarget = $(this).find("a[href='" + targetId + "']").length > 0;
                                if (hasTarget) {
                                    $(this).addClass("active");
                                } else {
                                    $(this).removeClass("active");
                                }
                            });
                        } else {
                            loadDetails(taskId);
                        }
                    }
                    loadAllTasks();

                    $("#btnAddNewTask").click(function () {
                        var html = $("#tplAddNewTask").html();
                        var tpl = kendo.template(html);
                        var renderHtml = kendo.render(tpl, [
                            { Id: 0 }
                        ]);
                        $("#taskMain").html(renderHtml);
                        $.validator.messages.required = "";
                        $.validator.messages.date = "";
                        $("#formAddNewTask").validate();
                        initKendoControls();



                    });

                    $("#myPublish").on("click", ".img-priority", function () {
                        var taskid = $(this).data("taskid");
                        if ($(this).data("cancel")) {
                            changeLevel(taskid);
                            $(this).remove();
                        }
                    });

                    $("#myPublish").on("mouseover mouseout", ".img-priority", function () {
                        var button = $(this);

                        if (button.data("cancel")) {
                            button.data("cancel", false);
                            $(this).attr("src", "__PUBLIC__/themes/images/icon_topprority.png");
                        } else {
                            button.data("cancel", true);
                            $(this).attr("src", "__PUBLIC__/themes/images/icon_cancelprority.png");
                        }
                    });

                    $(document).on("change", "select.task-item-status", function () {
                        changeStatus($(this));
                    });
                    $(document).on("click", "a.edit-task", function () {
                        loadEditForm($(this).data("taskid"))
                    });
                    $(document).on("click", ".task-item h3 > a", function () {
                        loadDetails($(this).data("id"))
                    });
                    $(document).on("click", ".remove-button", function () {
                        removeComments($(this).data("id"))
                    });
                    $(document).on("click", "a.remove-task", function () {
                        var taskid = $(this).data("taskid");
                        var removeButton = $(this);
                        messageBox.confirm({
                            title: "删除确认",
                            content: "您确定要删除此任务？",
                            sure: function () {
                                removeButton.addClass("waiting").attr("disabled", true);
                                $.ajax({
                                    url: "/Bridge-Taskapi-deleteTask",
                                    data: { id: taskid },
                                    type: "post",
                                    dataType: "json",
                                    success: function (data) {
                                        if (data.success == 0) {
                                            messageBox.alert({ title: "失败", content: data.msg });
                                            return;
                                        }

                                        loadAllTasks();
                                    }
                                });
                                $("#taskMain").html("");
                                messageBox.close();
                            }
                        });
                    });

                    $(document).on("submit", ".post-comments", function () {
                        var id = $(this).data("id");
                        var content = $("#txtComments").val();
                        var btn = $(".comment-button");
                        btn.button("loading");
                        btn.addClass("waiting");
                        $.ajax({
                            url: "/Bridge-Taskapi-comment",
                            type: "post",
                            dataType: "json",
                            data: { task: id, text: content },
                            success: function (data) {
                                $("#txtComments").val("");
                                btn.button("reset");
                                btn.removeClass("waiting");

                                if (data.success == 0) {
                                    messageBox.alert({ title: "失败", content: data.msg });
                                    return;
                                }
                                loadCommtents(id);
                            }
                        });

                        return false;
                    });

                    $(document).on("submit", "#formAddNewTask", function () {

                        if (!$("#formAddNewTask").valid()) {
                            return false;
                        }

                        var btn = $("#btnSubmit");
                        var title = $("#title").val();
                        var executor = $("#executor option:selected").val();
                        var ccMembers = $("#selCC").data("kendoMultiSelect").value();
                        var expires = $("#txtExpires").val();
                        var priority = $("#priority").is(":checked") ? 1 : 0;
                        var taskcontent = $("#taskcontent").val();
                        btn.button("loading");
                        btn.addClass("waiting");
                        $.ajax({
                            url: "/Bridge-Taskapi-saveTask",
                            data: { id: 0, title: title, content: taskcontent, to: executor, cc: ccMembers, deadline: expires, priority: priority },
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                btn.removeClass("waiting");
                                btn.button("reset");

                                if (data == undefined) {
                                    messageBox.alert({ title: "错误", content: "出错了！" });
                                    return;
                                }
                                if (data.success == 0) {
                                    messageBox.alert({ title: "保存失败", content: data.msg });
                                    return;
                                }
                                loadAllTasks();
                                $("#formAddNewTask").remove();
                            }
                        });
                        return false;
                    });

                    $(document).on("submit", "#formEditTask", function () {
                        if (!$("#formEditTask").valid()) {
                            return false;
                        }
                        var btn = $("#btnSubmit");
                        var taskid = $(this).data("taskid");
                        var title = $("#title").val();
                        var executor = $("#executor option:selected").val();
                        var ccMembers = $("#selCC").data("kendoMultiSelect").value();
                        var expires = $("#txtExpires").val();
                        var priority = $("#priority").is(":checked") ? 1 : 0;
                        var taskcontent = $("#taskcontent").val();
                        btn.button("loading");
                        btn.addClass("waiting");

                        $.ajax({
                            url: "/Bridge-Taskapi-saveTask",
                            data: { id: taskid, title: title, content: taskcontent, to: executor, cc: ccMembers, deadline: expires, priority: priority },
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                btn.removeClass("waiting");
                                btn.button("reset");

                                if (data == undefined) {
                                    messageBox.alert({ title: "错误", content: "出错了！" });
                                    return;
                                }
                                if (data.success == 0) {
                                    messageBox.alert({ title: "保存失败", content: data.msg });
                                    return;
                                }

                                loadAllTasks();
                                loadDetails(taskid);
                            }
                        });
                        return false;
                    });

                    initKendoControls();

                    $(document).on("click", "#btnCancel", function () {
                        if ($(this).data("new")) {
                            $("#taskMain .task-details").remove();
                        } else {
                            $("#taskMain .task-details").show();
                            $("#taskMain .task-edit-container").html("");
                        }
                    });
                });

                function removeComments(id) {
                    $.ajax({
                        url: "/Bridge-Taskapi-delComment",
                        type: "get",
                        dataType: "json",
                        data: { comment: id },
                        success: function (data) {

                            if (data.success == 0) {
                                messageBox.alert({ title: "删除失败", content: data.msg });
                                return;
                            }
                            $("a.remove-button[data-id='" + id + "']")
                                .closest(".task-comments-line")
                                .remove();
                        }
                    });
                }

                function loadEditForm(id) {
                    $.ajax({
                        url: "/Bridge-Taskapi-getSingleTask",
                        type: "get",
                        dataType: "json",
                        data: { task: id },
                        success: function (bd) {
                            var vbd = eval(bd);
                            var data = vbd.data;
                            if (vbd && $.isArray(data)) {
                                var tpl = kendo.template($("#tplEditTask").html());
                                var html = kendo.render(tpl, data);
                                $("#taskMain .task-details").hide();
                                $("#taskMain .task-edit-container").html(html);
                                initKendoControls();
                                $.validator.messages.required = "";
                                $("#formEditTask").validate();

                                var obj = data[0];
                                $("#executor").get(0).value = obj.to;
                                if (obj.cc && $.isArray(obj.cc)) {
                                    $("#selCC").data("kendoMultiSelect").value(obj.cc);
                                }

                            }
                        }
                    });
                }

                function loadDetails(id) {
                    if (id) {
                        $.ajax({
                            url: "/Bridge-Taskapi-getSingleTask",
                            type: "get",
                            dataType: "json",
                            data: { task: id },
                            success: function (data) {
                                var vbd = eval(data);
                                if (data && $.isArray(vbd.data)) {
                                    var tpl = kendo.template($("#tplDetails").html());
                                    var html = kendo.render(tpl, vbd.data);
                                    $("#taskMain").html(html);
                                    loadCommtents(id);
                                }
                            }
                        });
                    }
                }

                function initKendoControls() {
                    $("#txtExpires").kendoDatePicker({ format: 'yyyy-MM-dd' });
                    $("#selCC").kendoMultiSelect();

                    $(".task-input").on("keydown", function () { return false; });
                }

            });
    </script>
</block>
